<template>
  <div class="manager-container">
    <div class="header">
      <div>日程列表</div>
      <el-button type="primary" size="default" plain @click="tabChange" v-if="isShow == 1">日历</el-button>
      <el-button type="primary" size="default" plain @click="listChange" v-if="isShow == 2">列表</el-button>
    </div>
    <div style="padding:15px 0;" v-if="isShow == 1">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form :model="queryParams" ref="queryForm" :inline="true" class="manager-search">
            <el-col :span="6">
              <el-form-item label="日程标题" prop="scheduleTitle">
                <el-input
                  v-model="queryParams.scheduleTitle"
                  placeholder="请输入日程标题"
                  clearable
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="true">
              <el-form-item label="状态" prop="scheduleStatus">
                <el-select
                  v-model="queryParams.scheduleStatus"
                  placeholder="请选择"
                  clearable
                  :style="{width: '100%'}"
                  @keyup.enter="handleQuery"
                >
                  <el-option
                    v-for="(item, index) in Options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" v-if="true">
              <el-form-item label="日程类型" prop="scheduleType">
                <el-select
                  v-model="queryParams.scheduleType"
                  placeholder="请选择"
                  clearable
                  :style="{width: '100%'}"
                  @keyup.enter="handleQuery"
                >
                  <el-option
                    v-for="(item, index) in dateType"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" @click="handleQuery" size="default">
                <i class="iconfont icon-chaxun btn-icon">查询</i>
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button @click="resetQuery" size="default">
                <i class="iconfont icon-chongzhi btn-icon">重置</i>
              </el-button>
            </el-col>
          </el-form>
        </el-col>
        <!-- 搜索条件结束 -->

        <!-- 工具条开始 -->
        <!-- 工具条结束 -->
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5">
          <!-- 替换内容块开始 -->
          <el-button type="primary" @click="handleAdd" size="default">
            <i class="iconfont icon-tianjia btn-icon">新增</i>
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <!-- 替换内容块开始 -->
          <el-button type="primary" @click="handleExport" size="default">
            <i class="iconfont icon-daochu btn-icon">导出</i>
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <!-- 替换内容块开始 -->
          <el-button :disabled="single" @click="handleDelete" size="default" plain>
            <i class="iconfont icon-shanchu btn-icon">批量删除</i>
          </el-button>
        </el-col>
      </el-row>
      <div class="table-list">
        <el-table
          :header-cell-style="{background:'#fafafa'}"
          :border="true"
          :data="tableList"
          @selection-change="handleSelectionChange"
          class="menu-table"
          :show-header="true"
          height="500"
        >
          <el-table-column type="selection" align="center"/>
          <el-table-column label="编号" prop="id" align="center" :show-overflow-tooltip="true"/>
          <el-table-column
            label="日程标题"
            prop="scheduleTitle"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="开始时间"
            prop="pstartTime"
            align="center"
            :show-overflow-tooltip="true"
            sortable
          />
          <el-table-column
            label="结束时间"
            prop="pendTime"
            align="center"
            :show-overflow-tooltip="true"
            sortable
          />
          <el-table-column
            label="日程类型"
            prop="scheduleType"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <span>{{scope.row.scheduleType == '1'?'个人':'组织内部'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="紧急程度"
            prop="urgencyDegree"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <span v-if="scope.row.urgencyDegree == '1'">一般</span>
              <span v-if="scope.row.urgencyDegree == '2'">紧急</span>
              <span v-if="scope.row.urgencyDegree == '3'">非常紧急</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            prop="scheduleStatus"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template #default="scope">
              <span>{{scope.row.scheduleStatus == '1'?'未开始':'已提醒'}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="200"
            fixed="right"
          >
            <template #default="scope">
              <el-button size="default" type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button plain type="text" size="default" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="pagination"
        />
      </div>
    </div>
    <div style="padding:15px 0;" v-if="isShow == 2">
		<dayTable @add="handleAdd" @edit="handleEdit"></dayTable>
	</div>
    <!-- 表单页面 -->
    <formModal ref="formModal" @ok="getList" :formList="formList"/>
  </div>
</template>
<script>
import api from "@/api";
//分页
import Pagination from "@/components/Pagination/index.vue";
import formModal from "./form.vue";
import dayTable from "./dayTable.vue";
export default {
  components: {
    Pagination,
    formModal,
	dayTable
  },
  data() {
    return {
      isShow: true,
      djrq: [],
      single: true, //批量删除
      ids: [],
      Options: [
        {
          label: "未开始",
          value: "1"
        },
        {
          label: "已提醒",
          value: "2"
        }
      ], //状态
      dateType: [
        {
          label: "个人",
          value: "1"
        },
        {
          label: "组织内部",
          value: "2"
        }
      ], //日程类型
      total: 0, //多少条
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      //列表数据
      tableList: [],
      formList:{},
    };
  },
  /**
   * 初始化函数
   */
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getList();
    });
  },
  methods: {
    //切换变换组件
    tabChange() {
      this.isShow = 2;
    },
    listChange() {
      this.isShow = 1;
    },
    /**
     * 获取分页参数
     */
    pagination({ page, limit }) {
      this.queryParams.pageNum = page;
      this.queryParams.pageSize = limit;
      this.getList();
    },
    /**获取列表数据 */
    getList() {
      api.zfSchedule.list(this.queryParams).then(res => {
        if (res.code) {
          //设置列表数据
          this.tableList = res.rows;
          this.$emit('ok')
          //设置总条目数
          this.total = res.total;
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err=>{
        this.$message.error(err.msg)
      });
    },
    /**
     * 查询方法
     */
    handleQuery() {
      //设置默认进入第一页
      this.queryParams.pageNum = 1;
      //获取列表数据
      this.getList();
    },
    /**
     * 重置表单
     */
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.getList();
    },
    /**
     * 复选方法
     */
    handleSelectionChange(selection) {
      this.single = !selection.length;
      this.ids = selection.map(item => item.id);
    },
    /**新增 */
    handleAdd() {
      //清空表单数据
      console.log(this.$refs.formModal,"this.$refs.formModal");
      
      this.$refs.formModal.time.length = 0
      this.$refs.formModal.peopleId.length = 0
      this.$refs.formModal.formData = {}
      this.$refs.formModal.show();
    },
    /**编辑 */
    handleEdit(row) {
      this.$refs.formModal.title="编辑";
      this.$refs.formModal.show();
        api.zfSchedule.editId(row.id).then(res=>{
            if(res.code == 200){
                this.formList = res.data
            }
        })
    },
    /**删除 */
    handleDelete(row) {
      const jobId = row.id || this.ids;
      this.$confirm("是否确认删除当前数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return api.zfSchedule.del(jobId);
        })
        .then(() => {
          this.getList();
          //弹出提示
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    /**导出 */
    handleExport() {
      api.zfSchedule
        .ExportData()
        .then(res => {
          const link = document.createElement("a");
          let blob = new Blob([res], {
            type: res.type
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", "日程管理统计数据");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.el-icon {
  margin-left: -5px;
}
.header {
  margin-top: -15px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 3px #e3e3e3;
}
</style>
